<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <title>订单详情</title>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />

    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
        #h1{
            height: 50px;

        }
        el-table th{
            text-align: center;
        }
        .el-dialog{
            width: 500px;
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">订单列表</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div id="h1">
        <el-row>
            <el-button type="success" plain @click=btn(0) >全部订单</el-button>
            <el-button plain @click=btn(1)  >待审核订单</el-button>
            <el-button plain @click=btn(2)  >已审待放款订单</el-button>
            <el-button plain @click=btn(3)  >已放款订单</el-button>
            <el-button plain @click=btn(4)  >已完成订单</el-button>
        </el-row>
    </div>

    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
                <!-- Form，模态框弹出 -->
                <el-button style="float: right; padding: 3px 0 ;width: 70px;height: 30px"
                           type="primary" plain @click=search1>
                    高级检索
                </el-button>
                <div id="ss1" class="el-dialog">
                    <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="输入搜索：" :label-width="formLabelWidth">
                                <el-input v-model="form.id" autocomplete="off" placeholder="订单编号"
                                          style="width: 215px;"></el-input>
                            </el-form-item>
                            <el-form-item label="贷款人：" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off" placeholder="贷款人姓名"
                                          style="width: 215px;"></el-input>
                            </el-form-item>
                            <el-form-item label="订单状态：" :label-width="formLabelWidth">
                                <el-select v-model="form.status" placeholder="全部">
                                    <el-option label="默认" value="0"></el-option>
                                    <el-option label="待审核" value="1"></el-option>
                                    <el-option label="待付款" value="2"></el-option>
                                    <el-option label="已付款" value="3"></el-option>
                                    <el-option label="已完成" value="4"></el-option>
                                    <el-option label="已关闭" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="订单来源：" :label-width="formLabelWidth">
                                <el-select v-model="form.from" placeholder="全部">
                                    <el-option label="PC端订单" value="pc"></el-option>
                                    <el-option label="APP订单" value="phone"></el-option>
                                </el-select>
                            </el-form-item>
                            <template >
                                <el-form-item label="提交时间：" style="margin-left: 20px">
                                    <div class="block" id="t2" style="margin-top: 15px">
                                        <span class="demonstration"></span>
                                        <el-date-picker
                                                v-model="form.tkTime"
                                                type="date"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </template>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click=order_search1>确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>

            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="输入搜索：" style="margin-left: 20px">
                        <el-input v-model="formInline.orderNo" placeholder="订单编号" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="申请人：" style="margin-left: 20px">
                        <el-input v-model="formInline.userName" placeholder="贷款人姓名" style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <template>
                    <el-form-item label="提交时间：" style="margin-left: 20px">
                        <div class="block" id="t1" style="margin-top: 15px">
                            <span class="demonstration"></span>
                            <el-date-picker
                                    v-model="formInline.createTime"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
                <el-button style="float: right; padding: 3px 0 ;width: 70px;height: 30px" type="primary" plain>导出订单</el-button>
                <el-button style="float: right; padding: 3px 0 ;width: 70px;height: 30px; margin-right: 20px;" type="primary" plain>分单</el-button>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;text-align: center">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="50">
                    </el-table-column>
                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="orderNo"
                            label="申请编号"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="提交时间"
                            width="240"
                            type="date"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>
                    <el-table-column
                            prop="userBean.userInfoBean1.name"
                            label="用户账号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="productBean.productName"
                            label="申请产品"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="申请金额"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="productBean.loanLife"
                            label="贷款期限"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="订单状态"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <el-button style="float:left; padding: 3px 0" type="text"
                                   @change=qa_view()>查看</el-button>
                    </el-table-column>
                </el-table>
            </template>
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>

<script th:inline="javascript">
    let app3 = new Vue({
        el:"#top"
    })

    let app = new Vue({
            el:'#main',
            data:{
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
                formInline: {
                    orderNo: '',
                    userName: '',
                    createTime:''
                },
                /*订单搜索弹框*/
                form: {
                    id:'',
                    name: '',
                    status:0,
                    from:'',
                    tkTime:''
                },

                /*时间选择*/
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },

                value:'',

                /*模态框弹框显示*/
                dialogFormVisible: false,
                formLabelWidth: '100px'
            },

            methods:{
                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val) {
                    axios.get([[@{order/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            /*输入框*/
                            orderNo:this.formInline.orderNo,
                            userName:this.formInline.userName,
                            createTime:this.formInline.time,
                            /*弹框*/
                            id:this.form.id,
                            name: this.form.name,
                            status:this.form.status,
                            from:this.form.from,
                            tkTime:this.form.tkTime

                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        /*循环*/

                    }).catch(error => {
                        console.log(error);
                    })
                },

                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },


                // 点击弹出模态框
                search1(){
                    this.dialogFormVisible = true;
                },
                //模态框提交事件
                order_search1() {
                    axios.get([[@{order/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                                //从什么地方开始查
                                offSet:0,
                                //当前查第几页
                                pageNum:1,
                                //排序字段和排序方式
                                sort:"create_time",
                                sortOrder:"desc",
                                //要传属性的继续写在下面
                                id:this.form.id,
                                name: this.form.name,
                                status:this.form.status,
                                from:this.form.from,
                                tkTime:this.form.tkTime
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                    }).catch(error => {
                        console.log(error);
                    }),
                        this.dialogFormVisible = false;
                },

                //修改状态的请求
                change:function(index,row){
                    console.log(index,row);
                },

                //表单提交
                onSubmit() {
                    console.log(this.form.status);
                    axios.get([[@{order/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            orderNo:this.formInline.orderNo,
                            userName:this.formInline.userName,
                            createTime:this.formInline.time
                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        /*循环*/

                    }).catch(error => {
                        console.log(error);
                    })
                },

                //按钮提交
                btn(val) {
                    console.log(this.form.status);
                    axios.get([[@{order/page}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                                //从什么地方开始查
                                offSet:0,
                                //当前查第几页
                                pageNum:1,
                                //排序字段和排序方式
                                sort:"create_time",
                                sortOrder:"desc",
                                //要传属性的继续写在下面
                                status:val

                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        /*循环*/

                    }).catch(error => {
                        console.log(error);
                    })
                }
            },
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
            }
    })

</script>
</body>
</html>